<script setup>
import http from '@/utils/request.js';
import { onMounted } from 'vue';
import { ref, reactive } from 'vue';
import { useRoute, useRouter ,} from 'vue-router'; //路由器
//获取路由对象
const route = useRoute();
//获取到 router 对象，用于编程式跳转导航
const router = useRouter();
//显示弹出层
const showTop = ref(false);
const align = ref('center');
//商品图片
const goodsUrl = ref("");
//订单信息
let orderInfo = reactive({
    orderNumber: '',
    price: '',
    number: '',
    address: '',
    image: '',
})
//获取订单信息
const getOrderInfo = function () {
    http.get('/user/order/'+route.params.goodsId).then((res) => {
        console.log('获取到的订单信息', res.data);
        orderInfo.orderNumber = res.data.data.orderNumber;
        orderInfo.price = res.data.data.orderPrice;
        orderInfo.number = res.data.data.amount;
        orderInfo.address = res.data.data.address;
        goodsUrl.value = res.data.data.picture;
    });
}
onMounted(() => {
    getOrderInfo();
})
//跳转到个人页面
function toPersonalView() {
    router.push("/personal");
}
onMounted(() => {
    getOrderInfo();
})
//跳转到首页
function toFirstPageView() {
    router.push("/");
}
//跳转到商品分类页面
function toGoodsType() {
    router.push("/goodstype");
}
//跳转到发布闲置页面
function toPublishView() {
    router.push("/fabuxianzhi");
}
//跳转到消息页面
function toMessageView() {
    router.push("/messagelist");
}
</script>
<template>
    <van-sticky>
        <van-nav-bar title="浏览历史" left-text="返回" left-arrow @click-left="toPersonalView" :border="false" class="nav_bar">
            <template #right>
                <van-icon name="wap-nav" color="black" size="20" @click="showTop = true" />
            </template>
        </van-nav-bar>
    </van-sticky>
    <nut-popup position="top" closeable :style="{ height: '20%' }" teleport-disable v-model:visible="showTop">
        <van-col offset="2">
            <div class="font">快捷入口</div>
        </van-col>
        <nut-row type="flex" justify="space-evenly" class="popup">
            <nut-col :span="4" :align="center" @click="toFirstPageView">
                <IconFont name="home" size="30"></IconFont>
                <div>首页</div>
            </nut-col>
            <nut-col :span="4" :align="center" @click="toGoodsType">
                <IconFont name="category" size="30"></IconFont>
                <div>分类</div>
            </nut-col>
            <nut-col :span="4" :align="center" @click="toPublishView">
                <IconFont name="share-n" size="30"></IconFont>
                <div>发布闲置</div>
            </nut-col>
            <nut-col :span="4" :align="center" @click="toMessageView">
                <IconFont name="message" size="30"></IconFont>
                <div>消息</div>
            </nut-col>
            <nut-col :span="4" :align="center" @click="toPersonalView">
                <IconFont name="people" size="30"></IconFont>
                <div>个人主页</div>
            </nut-col>
        </nut-row>
    </nut-popup>
    <van-col class="form">
        <van-row gutter="15">
            <van-col offset="1">
                <van-image width="100" height="100" radius="10px" :src="goodsUrl" />
            </van-col>
            <van-col>
                <van-text-ellipsis :content="text" style="font-size: 15px;" />
                <van-tag plain type="primary">售后无忧</van-tag>
                <van-tag plain type="primary">假一赔三</van-tag>
            </van-col>
            <van-col offset="2">
                <p>实付￥{{ orderInfo.price }}</p>
                <p>x{{ orderInfo.number }}</p>
            </van-col>
        </van-row>
    </van-col>
    <van-col class="form">
        <van-cell title="实付款：" :border="false">
            <template #value>
                <span class="custom-title">￥{{ orderInfo.price }}</span>
            </template>
        </van-cell>
        <van-cell title="收货信息：" :border="false">
            <template #value>
                <span class="custom-title">{{ orderInfo.address }}</span>
            </template>
        </van-cell>
        <van-cell title="订单编号：" :border="false">
            <template #value>
                <span class="custom-title">{{ orderInfo.orderNumber }}</span>
            </template>
        </van-cell>
    </van-col>
    <van-col class="form">
        <van-cell icon="passed" title="15天保价" label="在订单签收15天内，商品出现降价可享受保价服务，部分特殊场景不支持保价" :border="false" />
        <van-cell icon="passed" title="7天无理由退货" label="支持7天无理由换货" :border="false" />
        <van-cell icon="passed" title="发货&售后" label="本平台提供发货、售后服务" :border="false" />
    </van-col>
    <van-col class="form">
        <van-col offset="1">
            <p>遇到问题？</p>
        </van-col>
        <van-row justify="center">
            <van-space :align="align">
                <van-icon name="chat-o" @click="toMessageView" />
                <p @click="toMessageView">联系卖家</p>
            </van-space>
        </van-row>
    </van-col>
    <van-action-bar>
        <van-col offset="9">
            <van-button round plain type="primary" size="small" @click="toCommentView">追加评价</van-button>
        </van-col>
        <van-col offset="1">
            <van-button round plain type="primary" size="small" @click="toNavbarView">重新购买</van-button>
        </van-col>
    </van-action-bar>
</template>
<style scoped>
.nav_bar {
    position: relative;
    top: -31px;
    margin: 0px -31px;
}

.font {
    position: relative;
    top: 20px;
}

.popup {
    position: relative;
    top: 50px;
}

.form {
    background-color: white;
    margin: 20px -25px;
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 30px;
}
</style>